<!-- Created by henian.xu on 2018/8/26. -->

<template>
    <div
        class="badge"
        :class="[size,theme,{'with-label':isLabel}]"
    >
        <div
            class="label"
            v-if="isLabel"
        >
            <slot>{{ label }}</slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Badge',
    data() {
        return {};
    },
    props: {
        label: {
            type: String,
            default: '',
        },
        size: {
            type: String,
            default: '',
        },
        theme: {
            type: String,
            default: '',
        },
    },
    computed: {
        isLabel() {
            return !!this.$slots.default || !!this.label;
        },
    },
};
</script>

<style lang="scss">
$line-height: 1.2;
$font-size: $body-font-size;
$minWidth: $font-size * $line-height;

.badge {
    display: inline-block;
    padding: $padding-small;
    background-color: #f00;
    color: #fff;
    border-radius: 100vh;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;

    &.with-label {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        > .label {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: $font-size;
            line-height: $line-height;
            min-width: $minWidth;
            min-height: $minWidth;
        }
    }

    /* 创建按钮大小 */
    @each $key, $value in $sizeList {
        &.#{$key} {
            /*@if ($value < 0.75) {
                $value: 0.75;
            }*/
            padding: $padding-small * $value;
            &.with-label {
                > .label {
                    $min-font-size: $font-size * $value;
                    @if ($min-font-size<18px) {
                        //$min-font-size: 12px;
                    }
                    font-size: $min-font-size;
                    min-width: $min-font-size * $line-height;
                    min-height: $min-font-size * $line-height;
                }
            }
        }
    }

    /* 主题颜色 */
    @each $key, $value in $colorList {
        &.#{$key} {
            $color-text: $color-text;
            @if (lightness($value) <71) {
                $color-text: #fff;
            }
            background-color: $value;
            color: $color-text;
        }
    }
}
</style>
